import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { createSetPageErrorAction } from '@/redux/actions/pageError'
import TopicInfo from './info'
import SpacePosts from '@/views/Space/posts'
import { topicApi } from '@/api'
class Topic extends PureComponent {
    postRef = React.createRef()

    state = {
        info: null,
        infoCount: null,
        nextPostId: null,
        posts: []  
    }

    get topicName() {
        const { match: { params: { title }} } = this.props
        return title
    }

    initData = async () => {
        try {
            await this.getInfo()
            await Promise.all([
                this.getActiveUser(),
                this.getPosts()
            ])
        } catch (error) {
            this.props.setPageError(true)
        }
    }

    getInfo = async () => {
        try {
            const { data } = await topicApi.getInfo({
                tag_name: this.topicName
            })
            if (data) {
                this.setState({
                    info: data
                })
            }
        } catch (error) {
            throw new Error(error)
        }
    }

    getActiveUser = async () => {        
        try {
            const { data } = await topicApi.getActiveUsers({
                topic_id: this.state.info.tag_id
            })
            if (data) {
                this.setState({
                    infoCount: data
                })
            }
        } catch (error) {
        }
    }

    getPosts = async () => {
        try {
            const { info, nextPostId, posts } = this.state
            const { data } = await topicApi.getRelated({
                topic_id: info.tag_id,
                topic_name: info.tag_name,
                offset: nextPostId || ''
            })
            if (data) {                
                const { has_more, cards } = data
                if (has_more === 0) {
                    this.setState({
                        nextPostId: -1
                    })
                    this.complete()
                } else {
                    this.setState({
                        nextPostId: cards[cards.length - 1].desc.dynamic_id_str,
                        posts: [...posts, ...cards]
                    })
                }  

            }
        } catch (error) {
        } finally {
            this.stopLoading()
        }
    }

    complete = () => {
        this.postRef.current?.complete()
    }

    stopLoading = () => {
        this.postRef.current?.stopLoading()
    }

    handlePostLoad = () => {
        const { nextPostId } = this.state
        if (nextPostId === -1) {
            this.complete()
            return
        }
        this.getPosts()
    }

    componentDidMount() {
        this.initData()
    }

    componentDidUpdate(prevProps) {
        const prevName = prevProps.match.params.title
        if (prevName !== this.topicName) {
            this.initData()
        }
    }

    render() {
        const { info, infoCount, posts } = this.state
        return (
            <>
                <TopicInfo info={info} infoCount={infoCount} />
                <SpacePosts 
                    ref={this.postRef}  
                    list={posts} 
                    onReachEnd={this.handlePostLoad}
                />
            </>
        )                
    }
}
export default connect(
    null,
    {
        setPageError: createSetPageErrorAction
    }
)(Topic)